<template>
    <div class="index">


    <!--      工具条-->
      <div style="margin: 20px;">
        <el-button  type="primary" size="small" icon="el-icon-circle-plus-outline"  v-if="$store.getters.button.includes('tags:add')" @click="openAddDialog()"> 添 加 </el-button>
        <el-button type="danger" size="small" icon="el-icon-refresh" @click="reload" > 刷 新 </el-button>
      </div>

<!--      表格-->
      <div class="table">
        <el-table
          :data="tagsList"
          element-loading-text="Loading"
          border
          fit
          :stripe="true"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="id"
            label="ID"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="tagsName"
            label="标签名称"
            sortable
            width="250">
          </el-table-column>
          <el-table-column
            align="center"
            prop="tagsDesc"
            label="标签描述">
          </el-table-column>
          <el-table-column
            align="left"
            label="操作">
            <template slot-scope="scope">
              <el-button

                size="small"
                type="success"
                icon="el-icon-edit"
                v-if="$store.getters.button.includes('tags:update')"
                @click="openEditDialog(scope.$index, scope.row)"
              >编 辑
              </el-button>
              <el-button

                size="small"
                type="danger"
                icon="el-icon-delete"
                v-if="$store.getters.button.includes('tags:delete')"
                @click="openDeleteDialog(scope.$index, scope.row)"
              >删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--    分页插件-->
      <div class="block" style="text-align: center; margin-top: 20px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!--    编辑框对话框-->
      <el-dialog title="编辑标签" :visible.sync="dialogTagsEditVisible" width="40%" top="10%" destroy-on-close="true" :close-on-click-modal='false'>

        <el-form  label-width="80px" :model="tagsInfo">
          <el-form-item label="ID">
            <el-input v-model="tagsInfo.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="标签名称">
            <el-input v-model="tagsInfo.tagsName"></el-input>
          </el-form-item>
          <el-form-item label="标签描述">
            <el-input v-model="tagsInfo.tagsDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTagsEditVisible = false">取 消</el-button>
          <el-button size="small"
                     type="success"
                     v-if="$store.getters.button.includes('tags:update')"
                     icon="el-icon-edit" @click="updateTags()">更 新</el-button>
        </div>
      </el-dialog>


      <!--    添加对话框-->
      <el-dialog title="添加标签" :visible.sync="dialogTagsAddVisible" width="40%" top="10%" destroy-on-close="true" :close-on-click-modal='false'>

        <el-form  label-width="80px" :model="tagsInfo">
          <el-form-item label="标签名称">
            <el-input v-model="tagsInfo.tagsName"></el-input>
          </el-form-item>
          <el-form-item label="标签描述">
            <el-input v-model="tagsInfo.tagsDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTagsAddVisible = false">取 消</el-button>
          <el-button type="success" @click="saveTags()" v-if="$store.getters.button.includes('tags:add')">添 加</el-button>
        </div>
      </el-dialog>


      <!--    删除对话框-->
      <div class="dialog">
        <el-dialog title="删除标签" :visible.sync="dialogTagsDeleteVisible" align="center" width="30%" destroy-on-close="true"
                   :close-on-click-modal='false'>
          <span>是否删除 << {{tagsInfo.id  + ":" + tagsInfo.tagsName }} >> </span>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTagsDeleteVisible = false">取 消</el-button>
            <el-button size="small"
                       type="danger"
                       v-if="$store.getters.button.includes('tags:delete')"
                       icon="el-icon-delete" @click="deleteTags" >删 除</el-button>
          </div>
        </el-dialog>
      </div>

    </div>

</template>

<script>
  import { getTagsListPage , updateTags, saveTags, deleteTags} from '@/api/tags'
  import { saveArticle } from '../../api/article'

  export default {
    name: 'index',
    inject: ['reload'],
    data() {
      return {
        // 标签列表
        tagsList:[],
        pageNum:1,    //当前页
        pageSize:10,   //每页条数
        pages:0, //总页数
        total: 0,     //总数据
        tagsInfo: {
          id:null,
          tagsName:'',
          tagsDesc:'',
        },


        dialogTagsEditVisible: false, //编辑对话框
        dialogTagsAddVisible: false,  //添加对话框
        dialogTagsDeleteVisible:false, //删除对话框
      }
    },
    mounted: function() {
      /**
       * 获取标签列表
       */
      this.getTagsList();
    },
    methods: {
      /**
       * 获取标签列表
       */
      getTagsList() {

        // api获取
        getTagsListPage(this.pageNum,this.pageSize).then(response => {

          if (response.code == 200) {
            const { data } = response
            console.log(JSON.stringify(data))
            // 更新数据
            this.tagsList= data.records //数据
            this.pageNum = parseInt(data.current) //当前页
            this.pageSize = parseInt(data.size)    //每页条数
            this.pages = parseInt(data.pages)    //总页数
            this.total = parseInt(data.total)   //总条数

          }

        }).catch(error => {
          console.log(error)
        })

      },

      /**
       * 编辑对话框
       * @param index
       * @param rowData
       */
      openEditDialog(index,rowData){

        // 设置给子组件的数据
        this.tagsInfo=JSON.parse(JSON.stringify(rowData));   //对象深拷贝
        // 打开对话框
        this.dialogTagsEditVisible = true;
      },

      /**
       * 更新标签
       * */
      updateTags(){
        // api获取
        updateTags(this.tagsInfo.id,this.tagsInfo).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            })

            // 修改数据
            this.tagsListReplaceTagsInfo(this.tagsInfo)

            this.dialogTagsEditVisible = false

          }


        }).catch(error => {
          console.log(error);
        })
      },


      /**
       * 打开添加对话框
       * */
      openAddDialog(){

        // 初始化数据
        this.tagsInfo= {
          'id':null,
          'tagsName':null,
          'tagsDesc':null
        }

        this.dialogTagsAddVisible = true

      },

      /**
       * 添加标签
       **/
      saveTags(){

        // api获取
        saveTags(JSON.stringify(this.tagsInfo)).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            })

            // 插入新数据
            this.tagsListAddTagsInfo(response.data)

            this.dialogTagsAddVisible = false;

          }


        }).catch(error => {
          console.log(error);
        })
      },


      /**
       * 打开删除分类对话框
       * */
      openDeleteDialog(index, row) {
        this.tagsInfo = row;
        this.dialogTagsDeleteVisible = true  //打开对话框
      },


      /**
       * 删除文章
       */
      deleteTags(){


        // api获取
        deleteTags(this.tagsInfo.id).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            });

            // 删除数据
           this.tagsListDeleteTagsInfo(this.tagsInfo)
            this.dialogTagsDeleteVisible = false
          }


        }).catch(error => {
          console.log(error);
        })

      },

      /**
       * tagsList 替换  tagsInfo
       * */
      tagsListReplaceTagsInfo(tagsInfo){
        this.tagsList.forEach((tagsItem,index) =>{
          if (tagsItem.id == tagsInfo.id){
            // 替换更新数据
            this.$set(this.tagsList,index,tagsInfo)
            return
          }
        })
      },

      /**
       * tagsList 添加  tagsInfo
       * */
      tagsListAddTagsInfo(tagsInfo){
        if (this.tagsList.length >= this.pageSize){
          return
        }
        this.tagsList.push(tagsInfo);
      },

      /**
       * tagsList 删除  tagsInfo
       * */
      tagsListDeleteTagsInfo(tagsInfo){
        this.tagsList.forEach((tagsItem,index) =>{
          if (tagsItem.id == tagsInfo.id){
            // 删除数据
            this.tagsList.splice(index,1)
            return
          }
        })
      },


      /**
       * 触发其他页
       * @param val
       */
      handleCurrentChange(val) {
        this.pageNum = val
        this.getTagsList();
      }

    }
  }
</script>

<style scoped>
  .index{
    margin:10px 20px;
  }
</style>
